<template>
  <div class="user-dept-select">
    <div @click="onVisible" class="value-box">
      <p class="text" :title="getText(ckeckList)" v-if="ckeckList.length">
        {{ getText(ckeckList) }}
      </p>
      <p class="tip" v-else>请选择</p>
    </div>
    <a-modal
      wrapClassName="user-dept-select-modal"
      v-model:visible="visible"
      :width="640"
      :title="title"
      @ok="onOk"
      :keyboard="false"
      :maskClosable="false"
      :destroyOnClose="true"
      centered
    >
      <div class="select-box">
        <div class="item" v-for="it in ckeckListCopy" :key="it.value">
          <rb-icon class="prev" :type="getIcon(it.type)" />
          <span class="text">{{ it.label }}</span>
          <rb-icon type="icon-luoshu-close" />
        </div>
      </div>
      <a-tabs centered>
        <a-tab-pane v-for="it in tabList" :key="it.value" :tab="it.label">
          <component
            :is="it.component"
            v-model:ckeckList="ckeckListCopy"
            :list="getList(it.value)"
            :formCards="formCards"
          ></component>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue';
import {
  CompList,
  TempList,
} from '@/components/common/UserDeptSelect/constant';
import DeptSelect from '@/components/common/UserDeptSelect/DeptSelect.vue';
import UserSelect from '@/components/common/UserDeptSelect/UserSelect.vue';
import RoleSelect from '@/components/common/UserDeptSelect/RoleSelect.vue';
import UserDeptCtlSelect from '@/components/common/UserDeptSelect/UserDeptCtlSelect.vue';

export default defineComponent({
  name: 'UserDeptSelect',
  components: {
    DeptSelect,
    UserSelect,
    RoleSelect,
    UserDeptCtlSelect,
  },
  props: {
    ckeckList: {
      type: Array as any,
      default: () => [],
    },
    formCards: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: () => '人员',
    },
    showCompList: {
      type: Array,
      default: () => [],
    },
  },
  setup(prop, context) {
    const visible = ref(false);
    const ckeckListCopy: any = ref(prop.ckeckList);
    const list = ref(TempList);
    const tabList = computed(() =>
      CompList.filter((it) => prop.showCompList.includes(it.value)),
    );
    const onVisible = () => {
      visible.value = true;
      ckeckListCopy.value = prop.ckeckList;
    };
    const getList = (type: string) => {
      return list.value.filter((it) => it.type === type);
    };
    const getText = (list: any[]) => {
      const len = list.length;
      if (!len) return '';
      if (len < 2) return list[0].label;
      let str = '';
      list.forEach((el, index) => {
        len - 1 === index ? (str += el.label) : (str += `${el.label} + `);
      });
      return str;
    };
    const getIcon = (type: string) => {
      switch (type) {
        case 'user':
          return 'icon-luoshu-creater';
        case 'dept':
          return 'icon-luoshu-multi-department';
        case 'role':
          return 'icon-luoshu-department';
        case 'userDeptCtl':
          return 'icon-luoshu-select';
        default:
          return 'icon-luoshu-creater';
      }
    };
    const onOk = () => {
      context.emit('update:ckeckList', ckeckListCopy.value);
      visible.value = false;
    };

    return {
      visible,
      tabList,
      ckeckListCopy,
      onVisible,
      getList,
      getText,
      getIcon,
      onOk,
    };
  },
});
</script>
<style lang="less">
.user-dept-select-modal {
  .select-box {
    .flexRow(flex-start, flex-start);
    flex-wrap: wrap;
    height: 84px;
    border: 1px solid @rb-border-color;
    padding: 8px;
    .item {
      .flexRow(flex-start, center);
      height: 24px;
      padding: 2px 4px;
      margin-right: 16px;
      border: 1px solid @rb-border-color;
      border-radius: 4px;
      background-color: @rb-background-color;
      .prev {
        cursor: auto;
      }
      .text {
        padding: 0 4px;
        padding-right: 8px;
      }
    }
  }
}
</style>
<style lang="less" scoped>
.user-dept-select {
  .value-box {
    padding: 0 8px;
    height: 28px;
    line-height: 28px;
    border: 1px solid @rb-border-color;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      border-color: @rb-primary-color;
    }
    .text {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .tip {
      color: @rb-disabled-color;
    }
  }
}
</style>
